<template>
  <div>
    <div class="allcatin_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable">保存数据</el-button>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @cell-dblclick="edit"
        :header-cell-style="thStyleFun" 
        :cell-style="cellStyleFun"
      >
      <!--   @blur="blur(scope.row.userId, scope.row.ID)" -->
        <el-table-column label="ID" prop="ID">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.ID"
              
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.ID }}</span>
            </el-form>
          </template>
        </el-table-column>
       <!--   @blur="blurline(scope.row.userId, scope.row.LINE_ID)" -->
        <el-table-column label="LINE_ID" prop="LINE_ID">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.LINE_ID"
              
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.LINE_ID }}</span>
              <!-- <span style="margin-left: 10px">{{ scope.row.size_origin }}</span> -->
            </el-form>
          </template>
        </el-table-column>
         <!-- @blur="onblur(scope.row.userId, scope.row.STEP_ID)" -->
        <el-table-column label="STEP_ID" prop="STEP_ID">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.STEP_ID"
                
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.STEP_ID }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="TYPE" prop="TYPE">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.TYPE"
                size="mini"
              ></el-input>
              <span v-else>{{ scope.row.TYPE }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
             :loading="scope.row.isLoading"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//  import qs from 'qs'
export default {
  data() {
    return {
      tablelist: [],
      tableData: [],
    };
  },
  mounted(){
    this.gettablelist()
  },
  methods: {
   gettablelist(){
      this.ajax.get('func/1023/selDev'
      ).then((res)=>{
          // console.log(res.data);
         res.data.forEach((ele) => {
           this.$set(ele,"isEdit",false);
           this.$set(ele,"isAbnormal",false)
        });
        this.tableData = res.data;

      })
   },
    
    thStyleFun() {
     return 'text-align: center;background:#696969;color:#fff;text-align:center'
    },
    cellStyleFun() {
        return 'text-align:center'
    }, 

    edit(row,column,cell,event){
        // console.log(row),
        // console.log(column)
        console.log(cell)
        console.log(event)
        if(row.isEdit) return;
        row.isEdit = !row.isEdit
        
    },

    addtable(){ 
         var obj =  {
              ID:'',
              isAbnormal:false,
              isEdit:false,
              LINE_ID:'',
              STEP_ID:'',
              TYPE:''
           }
           this.tableData.unshift(obj)   
          //  console.log(this.tableData.length)     
    },

   savetable(){
       let ary = [];
          this.tableData.forEach((item)=>{
              let  obj = {
                  ID:item.ID,
                  LINE_ID:item.LINE_ID,
                  STEP_ID:item.STEP_ID,
                  TYPE:item.TYPE,
              }
              ary.push(obj)
          })
         for (let i = 0; i < ary.length - 1; i++) {
            if (ary[i].ID == ary[i + 1].ID) {
              this.$alert(ary[i].ID, "id不能相同", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
              return 
            }else if(ary[i].LINE_ID == ""){
               this.blurline(ary[i].LINE_ID);
               return
            }else if(ary[i].STEP_ID == ""){
               this.onblur(ary[i].STEP_ID);
               return
            }else {
                this.ajax({
                  method:"POST",
                  url:"func/1023/updateDev?",
                  data:ary
                }).then((res)=>{
                  //  console.log(res)
                  if(res.data.code == 2000){   
                      this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.gettablelist()
                  }else{
                      this.$alert(res.data.text, "id不能相同", {
                        confirmButtonText: "确定",
                            callback: (action) => {
                              this.$message({
                                type: "info",
                                message: `action: ${action}`,
                              });
                            },
                      });
                  }
                })
                return
            }
        }
   }, 

      blur(item,id){
          // console.log("blur事件被执行了",item,id)
          if(id == ''){
             this.$alert( "id不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
      },

      onblur(id){
         if(id == ''){
             this.$alert( "SETP_ID不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
      },
      
      blurline(id){
           if(id == ''){
             this.$alert( "LINE_ID不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
      },


    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
       row.isLoading = true;
       this.$confirm('此操作将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               this.tableData.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                setTimeout(function () {
                    row.isLoading = false;
                }, 1500)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                row.isLoading = false;
            });
      console.log(index, row);
      // console.log(this.tableData.length)
    },
   
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom:5px;
  padding-left:5px;
  padding-top:5px; 
    /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>